import api from "@/api";
~function(){
	dialog.loginModal = function (){
		let captchaToken = Math.random().toString(36).slice(2),
			verifyToken = "";
		dialog.open({
			html:` 
				<div class="dialog-login-modal">
					<div class="login-form-item">
						<div class="input-wrap">
							<input 
								type="number" 
								class="input phone"
								pattern="[0-9]*" 
								placeholder="请输入手机号码" 
							/>
						</div>
					</div>
					<div class="login-form-item captcha-from-item">
						<div class="input-wrap">
							<input 
								type="text" 
								class="input captcha"
								pattern="[0-9]*" 
								placeholder="请输入图形验证码" 
							/>
						</div>
						<a href="javascript:;" class="code-image" data-src="/captcha?code=${captchaToken}">
							<img  src="/captcha?code=${captchaToken}" />
						</a>
					</div>
					<div class="login-form-item">
						<div class="input-wrap">
							<input 
								type="number" 
								class="input verifyCode"
								pattern="[0-9]*" 
								placeholder="请输入短信验证码" 
							/>
						</div>
						<a href="javascript:;" class="login-send-sms-btn">
							获取验证码
						</a>
					</div>
				</div>
			`,
			footer:{
				okText:"登录",
				cancelText:"取消"
			},
			okEvent:async function () {
				let {phone,verifyCode} = getData();
				if(!phone){
					alertTips.toast("请输入手机号");
					return
				}
				if(!REG_EXP.phone(phone)){
					alertTips.toast("手机号格式不正确");
					return
				}
				if(!verifyCode){
					alertTips.toast("请输入短信验证码");
					return
				}
				let result = await api('/auth/login' , {phone,verifyToken,verifyCode});
				if(result.errorCode != 0){
					alertTips.toast(result.errorMessage);
					return
				}
				location.reload()

			}
		})
		let $scope = $(".dialog-login-modal");
		let $countdown = new CountDown(".login-send-sms-btn");
		let phoneExists = {
			checked:false,
			value:false
		};

		$(".phone" ,$scope).on("input",function () {
			toggleCaptcha(false,"input")
		})

		$(".code-image").off().click(function() {
			let $a = $(this),
				src = $a.data("src")+ `&time=${+new Date}`,
				$img = $a.find("img");
			$img.attr("src",src)
		});
		
		$(".login-send-sms-btn").click(async function () {
			if($countdown.active){
				return
			}
			let {phone,captcha} = getData();
			if(!phone){
				alertTips.toast("请输入手机号");
				return
			}
			if(!REG_EXP.phone(phone)){
				alertTips.toast("手机号格式不正确");
				return
			}
			if(!phoneExists.checked){
				let result = await api("/check-phone-exists",{phone})
				phoneExists.value = result.data;
				phoneExists.checked = true
				if(!phoneExists.value){
					toggleCaptcha(true)
					return
				}
			}
			if(!captcha && !phoneExists.value){
				alertTips.toast("请输入图形验证码");
				return
			}
			$countdown.init(60)
			let result = await api('/auth/send/sms',{
				captcha,
				captchaToken,
				verifyToken,
				phone,
				verifyType:phoneExists.value ? "LOGIN":"REGISTER"
			});

			
			$countdown.start()
			if(result.errorCode != 0){
				$countdown.end()
				alertTips.toast(result.errorMessage)
				return
			}
			verifyToken = result.data
			toggleCaptcha(false)
			
		})


		function toggleCaptcha(value,type){
			let $captcha = $(".captcha-from-item");
			if(value){
				$captcha.addClass("show");
				return
			}
			phoneExists.checked = false;
			phoneExists.value = false;
			$captcha.removeClass("show");
			if(type != "input"){
				$(".code-image").click()
			}
			$(".captcha",$captcha).val("")
			
		}

		function getData(){
			
			return {
				phone:$(".phone" ,$scope).val(),
				captcha:$(".captcha",$scope).val(),
				verifyCode:$(".verifyCode",$scope).val(),
			}
		}
	};

	dialog.captchaModal = function (code,callback) {
		dialog.open({
			html:` 
				<div class="dialog-captcha-modal">
					<p>注册每课,您需要完成下方图形验证码,获取短信验证码。<p>
					<div class="captcha-code">
						<img class="code-image" src="/captcha?code=${code}" data-src="/captcha?code=${code}"/>
						<a class="captcha-change-btn" href="javascript:;">
							<i class="refresh-icon"></i>
							<span class="text">更换</span>
						</a>
					</div>
					<div class="captcha-input">
						<span class="label">请您输入图形验证码：</span>
						<div class="input-box">
							<input 
								type="text"
								class="input"
								id="captcha-code"
								pattern="[0-9a-zA-Z]*" 
								placeholder="图形验证码" 
							/>
							<i id="captcha-clear-btn" class="input-clear-icon"></i>
						</div>
					</div>
					<div class="error-tips">
						<span class="label">&nbsp;</span>
						<div class="error-text"></div>
					</div>
					
				</div>
				
			`,
			footer:{
				okText:"确定"
			},
			okEvent:function () {
				let code = $("#captcha-code").val()
				if(!code){
					error("请输入图形验证码")
					return
				}
				
				callback && callback(code,error)
			}
		})

		let $clearBtn = $("#captcha-clear-btn"),
			$input = $("#captcha-code"),
			$changeBtn = $(".captcha-change-btn"),
			$code = $(".code-image"),
			$error = $(".dialog-captcha-modal .error-tips")

		function error(text){
			if(text){
				$error.addClass("show").find(".error-text").html(text)
			}else{
				$error.removeClass("show").find(".error-text").html("")
			}
		}

		$changeBtn.click(function() {
			let src = $code.data("src") + `&time=${+new Date}`
			$code.attr("src",src)
		})

		$input.on("input",function (e) {
			let val = $input.val();
			if(val){
				error()
				$clearBtn.addClass("show")
			}else{
				$clearBtn.removeClass("show");
			}
		})
		$clearBtn.click(function () {
			$input.val("");
			error()
			$clearBtn.removeClass("show");
		})
	}


	function CountDown (className) {
		let $smsbtn = $(className),
			timer = undefined;
		let clonetime = 60,time=60
 		return {
 			active:false,
 			init:function (ss){
 				this.active = true
 				clonetime = time = ss || 60;
 				$smsbtn.addClass('disabled').text('发送中...')
 			},
			start:function () {
				
				if(!$smsbtn.hasClass('disabled')){
					$smsbtn.addClass('disabled')
				}
				if(time <= 0){
					this.end()
					return
				}
				 
				$smsbtn.text(`${time}s`)
				time --
				timer = setTimeout(() => {
					clearTimeout(timer)
					this.start()
				},1000)
			},
			end:function (){
				this.active = false
				time = clonetime;
				timer && clearTimeout(timer);
				$smsbtn.removeClass('disabled').text('获取验证码')
			}
		}
	}

} ()